import React, { useState } from 'react';
import { LeftOutlined } from '@ant-design/icons';
import { Menu ,Card} from 'antd';
import Meta from 'antd/es/card/Meta';
import rou  from '../../picture/rou.jpg'
import tudou from '../../image/tudou.png'
import yaxie from '../../image/yaxie.png'
import A from './Fenlei.module.css'
import Fen_center from './Fen_center';

const items = [
  {
    key: '1',
    label: '实用分类',
    children: [
      {
        key: '11',
        label: '素食',
      },
      {
        key: '12',
        label: '肉食',
      },
      {
        key: '13',
        label: '汤',
      },
      {
        key: '14',
        label: '家常菜',
      },
    ],
  },
  {
    key: '2',
    label: '每日三餐',
    children: [
      {
        key: '21',
        label: '早餐',
      },
      {
        key: '22',
        label: '午餐',
      },
      {
        key: '23',
        label: '下午茶',
      },
      {
        key: '24',
        label: '晚餐',
      },
    ],
  },
  {
    key: '3',
    label: '主食分类',
    children: [
      {
        key: '31',
        label: '炒饭',
      },
      {
        key: '32',
        label: '米饭',
      },
      {
        key: '33',
        label: '包子',
      },
      {
        key: '34',
        label: '饺子',
      },
      {
        key: '35',
        label: '饼',
      },
      {
        key: '36',
        label: '粥',
      },
    ],
  },
  {
    key: '4',
    label: '中华菜系',
    children: [
      {
        key: '41',
        label: '川菜',
      },
      {
        key: '42',
        label: '鲁菜',
      },
      {
        key: '43',
        label: '粤菜',
      },
      {
        key: '44',
        label: '豫菜',
      },
      {
        key: '45',
        label: '闽菜',
      },
      {
        key: '46',
        label: '东北菜',
      },
      {
        key: '47',
        label: '京菜',
      },
      {
        key: '48',
        label: '沪菜',
      },
    ],
  },
  {
    key: '5',
    label: '甜点',
    children: [

      {
        key: '51',
        label: '饼干',
      },
      {
        key: '52',
        label: '面包',
      },
      {
        key: '53',
        label: '蛋糕',
      },

    ],
  },
];
const getLevelKeys = (items1) => {
  const key = {};
  const func = (items2, level = 1) => {
    items2.forEach((item) => {
      if (item.key) {
        key[item.key] = level;
      }
      if (item.children) {
        func(item.children, level + 1);

      }
    });
  };
  func(items1);
  return key;
};
const levelKeys = getLevelKeys(items);
const Fenlei = () => {
  const [stateOpenKeys, setStateOpenKeys] = useState([]);

  const [selectedKey, setSelectedKey] = useState(null); // 用于存储被点击的key

  const onOpenChange = (openKeys) => {
    const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);
    // open
    if (currentOpenKey !== undefined) {
      const repeatIndex = openKeys
        .filter((key) => key !== currentOpenKey)
        .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);
      setStateOpenKeys(
        openKeys
          // remove repeat key
          .filter((_, index) => index !== repeatIndex)
          // remove current level all child
          .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey]),
      );  
    
      // console.log(currentOpenKey.children)
    } else {
      // close
      setStateOpenKeys(openKeys);

      // console.log(openKeys);
    }
  };


  const handleMenuClick = ({ key }) => {
    setSelectedKey(key); // 设置被点击的key到state
    // 这里可以添加其他需要执行的逻辑
    console.log('Selected Key:', key); // 打印被点击的key，用于调试
  };
  
  return (
    <div className={A.zong_bottom}>
        <div className={A.left}>
            <div className={A.left_top}>
                <span><LeftOutlined />全部分类</span>
            </div>
            <Menu
            //这行代码修改默认选中
        defaultSelectedKeys={['53']}
        mode="inline"
        openKeys={stateOpenKeys}
        onOpenChange={onOpenChange}
        onClick={handleMenuClick} 
        className={A.menu}
        style={{
            width: 130,
        }}
        items={items}
            />
        </div>
        <Fen_center/>       
        <div className={A.right}>
              <div className={A.right_1}>
                  <div className={A.right_1_title}>本周流行</div>
                  <div >
                    <div className={A.right_1_item}>
                      <div className={A.right_1_img}>
                        <img src={rou} alt="" className={A.ri_img}/>
                      </div>
                      <div>
                        <div className={A.TOP}>TOP1</div>
                        <div className={A.right_1_item_title}>鱼香肉丝</div>

                        <div className={A.num}>234人已看过</div>
                      </div>
                    </div>

                    <div className={A.right_1_item}>
                      <div className={A.right_1_img}>
                        <img src={yaxie} alt="" className={A.ri_img}/>
                      </div>
                      <div>
                        <div className={A.TOP2}>TOP2</div>
                        <div className={A.right_1_item_title}>鸭血粉丝汤</div>

                        <div className={A.num}>146人已看过</div>
                      </div>
                    </div>

                  </div>
              </div> 


              <div className={A.right_2}>
                  <div className={A.right_2_title}>菜谱大全</div>
                  <div className={A.right_2_item}>
                      <div className={A.quan}>红烧肉</div>
                      <div className={A.quan}>红烧肉</div>
                      <div className={A.quan}>红烧肉</div>
                      <div className={A.quan}>红烧肉</div>
                      <div className={A.quan}>红烧肉</div>
                  </div>
              </div>      

        </div>

    </div>

  );
};
export default Fenlei;